<html>
    <head>
        <title>jQuery.timepickr.js</title>
        <link rel="Stylesheet" media="screen" href="styles.css" />
        <link rel="Stylesheet" media="screen" href="ui.timepickr.css" />
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery.utils.js"></script>
        <script type="text/javascript" src="jquery.strings.js"></script>
        <script type="text/javascript" src="jquery.ui.all.js"></script>
        <script type="text/javascript" src="ui.dropslide.js"></script>
        <script type="text/javascript" src="ui.timepickr.js"></script>


        <script type="text/javascript">
            $(function(){
                //$('#test-1').timepickr({trigger: '#trigger-test'});
              $('#demo-1').timepickr().focus();
              $('#demo-2').timepickr({convention:12});
              $('#demo-4').timepickr({convention:12});
              $('#demo-1').next().find('ol').show().find('li:eq(2)').mouseover();
              // temporary fix..
              $('.ui-dropslide ol:eq(0) li:first').mouseover();
              // apply theme
              $('#demo-1').next().addClass('dark');
              $('#demo-2').next().addClass('dark');
            });
        </script>
    </head>
    <body>
                    <label for="demo-2">Time</label> 
                    <input id="demo-2" type="text" value="02:30" class="demo">
					</div>
    </body>
</html>

